<template>
	<!-- 分页 -->
	<input type="button" class="pageNav firstPageD" :class="[Number(current) === 1 ? 'disabledCls' : '']"  @click="firstPage" title="第一页">
	<input type="button" class="pageNav prevPage" :class="[Number(current) === 1 ? 'disabledCls' : '']" @click="prevPage" title="上一页">
	<input type="button" class="pageNav nextPage" :class="[current === pageTotal ? 'disabledCls' : '']" @click="nextPage" title="下一页">
	<input type="button" class="pageNav lastPage" :class="[current === pageTotal ? 'disabledCls' : '']" @click="endPage" title="最后页">
	<input type="button" class="pageNav jumpPage" @click="filterPage" title="页面跳转">

	<div class="paginationInputCon">
		<div class="paginationInput">
			<a-input v-model:value="current" type="number" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" @input="handleInput" v-bind="attrs" @keyup.enter.stop="filterPage" class="comInput"/>
		</div>
		<span class="inputItem">/</span>{{pageTotal}}页
	</div>
	<span>每页</span>
	<div class="pageSelect">
		<a-select
			v-model:value="pageSize" v-bind="attrsSelect"
			:size="size"
			:options="pageSizeOptions" @change="pageSizeFn" :key="value" class="hhSelect"></a-select>
	</div>
	<span>条</span>
</template>

<script setup>
import { ref, onMounted, nextTick, inject, defineProps, watch, useAttrs, defineExpose, defineEmits } from 'vue'
const pager = inject('pager', ref({
	current: 1,
	pageSize: 10,
	pageSizeOptions: [
		{
			value: 10,
			label: '10',
		},
		{
			value: 20,
			label: '20',
		},
		{
			value: 30,
			label: '30',
		},
	]
}))
const pageSizeOptions = pager.value.pageSizeOptions
const current = ref(1)
let pageSize = ref(pager.value.pageSize)
const props = defineProps({
	total: Number
})
//属性穿透
const attrs = useAttrs()
const attrsSelect = useAttrs()
//emits
const emits = defineEmits(['getPageInfo', 'getCurrent'])

const hhgTotal = ref(null)
const pageTotal = ref(null)
watch(() => props.total, (val) => {
  if (val) {
	hhgTotal.value = val
	pageTotal.value = Math.ceil(val / pager.value.pageSize)
  }
}, { immediate: true });
watch(() => pager.value.pageSize, (val) => {
  if (val) {
	pageTotal.value = Math.ceil(hhgTotal.value / val)
  }
}, { immediate: true }, { deep: true })

const handleInput = event=> {
	// 尝试将输入转换为数字
	current.value = Number(event.target.value)
	if (current.value > pageTotal.value) {
		event.target.value = pageTotal.value
      }
	
	emits('getCurrent', current.value)
}
watch(() => current.value, (newVal) => {
  if (newVal) {
	current.value = newVal > pageTotal.value && pageTotal.value ? pageTotal.value : newVal
  }
}, { immediate: true }, { deep: true })

//上一页
const prevPage = ()=> {
	if (current.value < 2) return
	current.value--
	emits('getPageInfo', {
		current: current.value,
		pageSize
	})
}
//下一页
const nextPage = ()=> {
	if (current.value > pageTotal.value - 1) return
	current.value++
	emits('getPageInfo', {
		current: current.value,
		pageSize
	})
}
// 跳首页
const firstPage = (type)=> {
	if (current.value === 1) return
	current.value = 1
	if (type === 0) return
	emits('getPageInfo', {
		current: current.value,
		pageSize
	})
}
//跳末页
const endPage = ()=> {
	if (current.value === pageTotal.value) return
	current.value = pageTotal.value
	emits('getPageInfo', {
		current: current.value,
		pageSize
	})
}
//筛选页码
const filterPage = ()=> {
	current.value = current.value == 0 ? 1 : current.value
	emits('getPageInfo', {
		current: current.value,
		pageSize
	})
}
const pageSizeFn = (data)=> {
	
	pageSize.value = data
	pageTotal.value = Math.ceil(hhgTotal.value / data)
	current.value = 1
	emits('getPageInfo', {
		current: current.value,
		pageSize: data
	})
}
defineExpose({ firstPage, current })
onMounted(() => {
	nextTick(()=>{})
})

</script>
<style scoped lang="scss"></style>